<template>
    <el-button type="primary" @click="drawer=true">
        添加管理员
    </el-button>
    <el-drawer v-model="drawer" title="添加管理员" :with-header="true">
          <el-form :model="ruleForm">
               <el-form-item label="管理员账号" prop="adminname">
                    <el-input v-model="ruleForm.adminname" placeholder="请输入管理员账户名" type="textxx" autocomplete="off" />
               </el-form-item>
               <el-form-item label="管理员密码" prop="password">
                    <el-input v-model="ruleForm.password" placeholder="请输入管理员密码" type="password" autocomplete="off" />
               </el-form-item>
               <el-form-item label="管理员权限" prop="role">
                    <el-select v-model="ruleForm.role" placeholder="选择管理员类型">
                         <el-option label="管理员" value="1" />
                         <el-option label="超级管理员" value="2" />
                    </el-select>
               </el-form-item>
          </el-form>
          <!-- <el-tree ref="treeRef" :data="data" show-checkbox node-key="path" :props="defaultProps" /> -->
          <el-button type="primary" @click="addAdminUser">确定</el-button>
     </el-drawer>
<el-table :data="tableData" style="width: 100%">
      <el-table-column label="序号" width="180px">
         <template #default='scope'>
            {{ scope.$index + 1 }}
         </template>
      </el-table-column>
      <el-table-column prop="img" label="账户名" width="180">
         
         <template v-slot:default="scope">
             {{ scope.row.adminname  }}
         </template>
      </el-table-column>
      <el-table-column prop="alt" label="权限">
         <template v-slot:default="scope">
            <el-tag type="success" v-if="scope.row.role == 1">管理员</el-tag>
            <el-tag type="danger" v-else-if="scope.row.role == 2">超级管理员</el-tag>
         </template>
      </el-table-column>
      <el-table-column label="操作">
         <template #default="scope">
            <el-button size="small" >
               编辑
            </el-button>
            <el-popconfirm class="box-item" title="确认删除吗？" placement="right">
               <template #reference>
                  <el-button size="small" type="danger" >
                     删除
                  </el-button>
               </template>
            </el-popconfirm>
         </template>
      </el-table-column>
   </el-table>
   <div class="demo-pagination-block">
    <div class="demonstration">All combined</div>
    <el-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[5, 10, 15, 20]"
      :disabled="disabled"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
import { addAdmin, getAdminList } from '@/apis/user'
import {computed, reactive, ref} from 'vue'
import { ElMessage } from 'element-plus'
const currentPage4 = ref(1)
const disabled = ref(false)
const drawer = ref(false)
const pageSize4 = ref(5)
const filterData=computed(()=>tableData.value.slice(currentPage4.value-1,currentPage4.value*5))
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
interface IAdmin111{
   adminname:string,
    password:string,
    role:string,
    checkedKeys:string[]
}
const ruleForm=reactive<IAdmin111>({
   adminname:'',
   password:'',
   role:'',
   checkedKeys:[]
})

// 将 addAdminUser 改为函数，在点击时执行
const addAdminUser = async () => {
    // 验证表单
    if (!ruleForm.adminname || !ruleForm.password || !ruleForm.role) {
        ElMessage.warning('请填写完整信息')
        return
    }
    
    try {
        const res = await addAdmin(ruleForm)
        console.log('添加管理员响应:', res)
        // 检查响应状态码和业务码
        if (res.data.code === '200' || res.data.code === 200) {
            ElMessage.success(res.data.msg || '添加管理员成功')
            // 清空表单
            ruleForm.adminname = ''
            ruleForm.password = ''
            ruleForm.role = ''
            ruleForm.checkedKeys = []
            // 关闭抽屉
            drawer.value = false
            // 刷新列表
            loadAdminList()
        } else {
            // 显示后端返回的错误消息
            ElMessage.error(res.data.msg || res.data.message || '添加失败')
        }
    } catch (error: any) {
        console.error('添加管理员错误:', error)
        // 处理网络错误或服务器错误
        const errorMsg = error.response?.data?.msg || 
                        error.response?.data?.message || 
                        error.message || 
                        '添加管理员失败'
        ElMessage.error(errorMsg)
    }
}

// 加载管理员列表
let tableData = ref([])


const loadAdminList = () => {
    getAdminList().then(res => {
        console.log(res)
        console.log(res.data.data)
        tableData.value = res.data.data || []
      //   console.log(tableData.value);
    }).catch(err => {
        console.error(err)
    })
}


// 初始化时加载列表
loadAdminList()
</script>

<style scoped>

</style>